<template>
  <div>
    <vxe-modal ref="vxeModal" v-model="checkModal" @close="close" title="大赛成绩填报" height="600" width="1200" show-zoom
      resize fullscreen>
      <template #default>
        <div class="body">
          <vxe-toolbar style="height: 100px;">
            <template #buttons>
              <el-row style="margin-bottom: 20px;" type="flex" :gutter="8">
                <el-col :span="2" style="display: flex;">
                  <vxe-button @click="checkModalShow" status="warning" type="success">
                    保存
                  </vxe-button>
                </el-col>
                <el-col :span="20">
                  <vxe-button @click="openExportEvent">导出</vxe-button>
                </el-col>
                <el-col :span="20">
                  <vxe-input style="float: right;" v-model.trim.lazy="filterName" type="search" placeholder="快捷检索"
                    @input="searchEvent"></vxe-input>
                </el-col>
              </el-row>
            </template>
          </vxe-toolbar>
          <vxe-table resizable ref="XTable" border max-height="800" stripe highlight-hover-row highlight-current-row
            resizable :loading="loading" :data="dataList" @sort-change="sortChange" :export-config="{}">
            <vxe-column field="checkbox" type="checkbox" width="60"></vxe-column>
            <vxe-table-column field="orgAddId" title="序号" sortable width="80"></vxe-table-column>
            <vxe-table-column field="playerName" title="运动员名字" sortable></vxe-table-column>
            <vxe-table-column field="sportName" title="运动项目" sortable></vxe-table-column>
            <vxe-table-column field="sportItemName" title="运动小项" sortable></vxe-table-column>
            <vxe-table-column field="sex" title="性别" sortable></vxe-table-column>
            <vxe-table-column field="matchName" title="比赛名称" sortable></vxe-table-column>
            <vxe-table-column field="address" title="比赛地点" sortable></vxe-table-column>
            <vxe-table-column field="startDate" title="开始时间" sortable></vxe-table-column>
            <vxe-table-column field="endDate" title="结束时间" sortable></vxe-table-column>
            <!-- <vxe-table-column field="result" title="成绩" sortable></vxe-table-column> -->
            <vxe-table-column field="topNum" title="名次" sortable></vxe-table-column>
          </vxe-table>
          <vxe-pager :loading="loading" :current-page="page.currentPage" :page-size="page.pageSize"
            :total="page.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="handlePageChange">
          </vxe-pager>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import {
    CompetitionResultList,
    getCompetitionResul,
    selectAllArea
  } from '@/api/organization.js'
  export default {
    data() {
      return {
        defaultDataList: [],
        dataList: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        },
        dataList1: [],
        docClassId: "",
        loading: false,
        filterName: '',
        searchProps: [],
        dict_emp: {},
        dict_sport: {},
        dict_sportItem: {},
        dict_available: [],
        previewData: {},
        currentDocClassId: null,
        isSearch: false,
        sportChangesportItemData: {},
        printWordModal: false,
        currentRow: {},
        search: false,
        checkModal: true,
        planCheckDocData: [],
        checkRadio: 0,
        checkedAction: false,
        checkend: false,
        nullDoc: [],
        errDoc: [],
        docDataArr: [],
      }
    },
    created() {
      this.init_data(),
        this.findList()
      this.getAllArea()

    },

    watch: {
      filterName(val) {
        if (!val) {
          this.page = {
            currentPage: 1,
            pageSize: 10,
            totalResult: 0,
          }
          this.search = false
          this.findList()
        }
      },

      checkModal(val) {
        if (!val) {
          this.checkend = false
          this.checkedAction = false
        }
      },
    },
    methods: {
      close() {
        this.$refs.vxeModal.close();
        this.$emit('updata')
      },

      //选中的数据
      checkModalShow() {



        // this.$message({
        //   type: 'error',
        //   message: '已过申报时间'
        // })
        let data = this.$refs.XTable.getCheckboxRecords()
        if (data.length !== 0) {
          data.forEach(item => {
            if (this.docDataIdArr === undefined) {
              this.docDataIdArr = []
            }
            this.docDataIdArr.push(item.orgAddId)
          })
        }
        // console.log(this.docDataIdArr, "99999999999999999");
        getCompetitionResul(this.docDataIdArr).then(res => {
          if (res.code == 200) {
            this.$message.success('添加成功')
            this.docDataIdArr = []
            this.init_data()
          } else {
            this.$message.error(res.data)
            this.docDataIdArr = []
          }


        })

      },




      //导出
      openExportEvent() {
        const list = this.dataList1
        console.log(list, "9999999999999999");
        setTimeout(() => {
          this.$refs.XTable.exportData({
            filename: '大赛成绩人员名单',
            type: 'csv',
            isHeader: true,
            isFooter: true,
            data: list
          })

        }, 100)
      },
      searchSelectDataChange({
        sportId,
        sportItemId,
        person
      }) {
        this.searchForm.sportId = sportId
        this.searchForm.empId = person
        this.searchForm.sportItemId = sportItemId
      },

      init_data(data) {
        CompetitionResultList().then(res => {
          this.dataList1 = res.data
          this.dataList = res.data
          this.dataList.forEach((item) => {
            item.startDate = this.$moment(item.startDate).format('YYYY-MM-DD')
            item.endDate = this.$moment(item.endDate).format('YYYY-MM-DD')
          })
          this.defaultDataList = res.data
          this.searchProps = Object.keys(res.data[0])
        })


      },
      getAllArea() {
        selectAllArea().then(res => {
          this.dict_available = res.data
        })
      },

      searchEvent() {
        const filterName = this.$XEUtils.toValueString(this.filterName).trim().toLowerCase()
        if (filterName) {
          const filterRE = filterName
          const searchProps = this.searchProps
          // console.log(searchProps, "99999999999999999999999");
          const rest = this.defaultDataList.filter(item => searchProps.some(key => this.$XEUtils.toValueString(item[
            key]).toLowerCase().indexOf(filterName) > -1))
          this.dataList = rest.map(row => {
            const item = Object.assign({}, row)
            searchProps.forEach(key => {
              item[key] = this.$XEUtils.toValueString(item[key]).replace(filterRE, match => match)
            })
            // console.log(item, "99999999999999999999999");
            return item
          })
          this.page = {
            currentPage: 1,
            pageSize: this.dataList.length,
            totalResult: this.dataList.length
          }
          this.search = true
        } else {
          this.dataList = this.defaultDataList
        }
      },
      handlePageChange({
        currentPage,
        pageSize
      }) {
        this.page.currentPage = currentPage
        this.page.pageSize = pageSize
        this.findList()
      },
      sortChange() {
        if (!this.search) {
          this.page.currentPage = 1
          this.page.pageSize = this.defaultDataList.length
          this.findList()
        } else {
          this.page.pageSize = this.dataList.length
        }
      },
      findList() {
        this.loading = true
        setTimeout(() => {
          if (this.insertSuccess) {
            this.page.totalResult = this.defaultDataList.length
            this.page.currentPage = Math.ceil(this.page.totalResult / this.page.pageSize)
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
            this.$refs.XTable.setCurrentRow(this.dataList[this.dataList.length - 1])
            this.insertSuccess = false
          } else {
            this.page.totalResult = this.defaultDataList.length
            this.dataList = this.defaultDataList.slice((this.page.currentPage - 1) * this.page
              .pageSize, this.page.currentPage * this.page.pageSize)
          }
          this.loading = false
        }, 300)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .body {
    padding: 10px;
    background-color: #FFFFFF;




  }

  ::v-deep .vxe-modal-modal--wrapper.type--modal .vxe-modal--bo {

    height: 1100px;
    position: absolute;

  }
</style>
